{extend name='layout:app'}

{block name='css'}
    <link rel="stylesheet" href="__STATIC__/css/recharge.css">
    <link rel="stylesheet" href="__STATIC__/css/zhifu.css">
{/block}

{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>{$title|default='余额充值'}</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>

        <div class="recharge">
            <div class="inner">
                <div class="name">
                    <i class="iconfont icon-wechat"></i>
                    <span>微信</span>
                </div>
                <div class="phone">{$Think.session.user.phone|substr=0,3}****{$Think.session.user.phone|substr=-4,4}</div>
                <div class="title">{$ftitle|default='充值'}金额</div>
                <div class="count-input">
                    <span class="icon-rmb">¥</span>
                    <el-input type="number" v-model="recharge"></el-input>
                </div>
                <el-button @click="next">下一步</el-button>
            </div>
        </div>

        <div id="modal"  v-loading="loading"
             element-loading-text="正在加载"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0,0,0,.1)"></div>
        <!--余额支付付款页面-->
        <div id="remaining">
            <!--<div class="header">
                <div class="all_w ">
                    <div class="gofh">
                        <img src="__IMG__/images/jt_03.jpg" style="width:16px;">
                    </div>
                </div>
            </div>
            <div class="wenx_xx">
                <div class="mz">测试商城</div>
                <div class="zhifu_price">￥88.88</div>
            </div>
            <div class="pay_by-remaining">
                <a href="javascript:void(0);" class="ljzf_but all_w">立即支付</a>
            </div>-->
            <!--浮动层-->
            <div class="ftc_wzsf">
                <div class="srzfmm_box">
                    <div class="qsrzfmm_bt clear_wl">
                        <img src="__IMG__/images/xx_03.jpg" class="tx close fl">
                        <img src="__IMG__/images/jftc_03.png" class="tx fl">
                        <span class="fl">请输入密码</span></div>
                    <div class="zfmmxx_shop">
                        <div class="mz">钱包提现</div>
                        <div class="zhifu_price">￥<span>{{recharge}}</span></div></div>
                    <ul class="mm_box">
                        <li></li><li></li><li></li><li></li><li></li><li></li>
                    </ul>
                </div>
                <div class="numb_box">
                    <div class="xiaq_tb">
                        <img src="__IMG__/images/jftc_14.jpg" height="10" style="width:40px;"></div>
                    <ul class="nub_ggg">
                        <li><a href="javascript:void(0);" class="zf_num">1</a></li>
                        <li><a href="javascript:void(0);" class="zj_x zf_num">2</a></li>
                        <li><a href="javascript:void(0);" class="zf_num">3</a></li>
                        <li><a href="javascript:void(0);" class="zf_num">4</a></li>
                        <li><a href="javascript:void(0);" class="zj_x zf_num">5</a></li>
                        <li><a href="javascript:void(0);" class="zf_num">6</a></li>
                        <li><a href="javascript:void(0);" class="zf_num">7</a></li>
                        <li><a href="javascript:void(0);" class="zj_x zf_num">8</a></li>
                        <li><a href="javascript:void(0);" class="zf_num">9</a></li>
                        <li><a href="javascript:void(0);" class="zf_empty">清空</a></li>
                        <li><a href="javascript:void(0);" class="zj_x zf_num">0</a></li>
                        <li><a href="javascript:void(0);" class="zf_del">删除</a></li>
                    </ul>
                </div>
                <div class="hbbj"></div>
            </div>
        </div>
    </div>
{/block}

{block name='footer'}{/block}

{block name='js'}
<!--{if $recharge}-->
<script>
    var that

    new Vue({
        el:'#app',
        data: {
            recharge: '',
            loading: false
        },
        mounted() {
            that = this  //生成vue副本
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            next() {
                let inputReg = /^\d+\.?\d{0,2}$/
                if(!inputReg.test(this.recharge)) {
                    this.$message({
                        message: '请输入正确的金额',
                        center: true,
                        duration: 1000
                    });
                    return ;
                }
                let splitRes = this.recharge.split('.')
                // console.log(splitRes)
                if(splitRes[0] == 0 && splitRes[1] == undefined) {
                    this.$message({
                        message: '请输入正确的金额',
                        center: true,
                        duration: 1000
                    });
                    return ;
                }

                const orderNum = that.createOrderNum()
                $.post('/index/payment/placeorder',{
                    describe: '钱包充值',
                    orderNum: orderNum,
                    money: that.recharge
                },function (res) {
                    if(res) {
                        if(typeof WeixinJSBridge == "undefined"){
                            if( document.addEventListener ){
                                document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, false);
                            }else if (document.attachEvent){
                                document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady);
                            }
                        }else {
                            that.onBridgeReady(res.data, orderNum);
                        }
                    }

                },'json')
                // window.location.href = '/pay/order/index';
            },
            onBridgeReady(paramNeed, orderNum) {
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', paramNeed,
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            $.post("/index/services/recharge", {
                                orderNum: orderNum,
                            }, function (resStatus) {
                                if(resStatus.code === 0) {
                                    str = sessionStorage.obj;
                                    //重新转换为对象
                                    obj = JSON.parse(str);
                                    if(obj==true){
                                        window.location.href = '/index/services/qrcodepay'
                                    }
                                    window.location.href = '/index/index/wallet'
                                }
                            },'json')
                        }
                    });
            },
            createOrderNum() {
                var t = new Date(),
                    y = t.getFullYear(),
                    mon = t.getMonth() + 1,
                    d = t.getDate(),
                    h = t.getHours(),
                    min = t.getMinutes(),
                    s = t.getSeconds()

                if(mon<10) mon = '0'+mon
                if(d<10) d = '0'+d
                if(h<10) h = '0'+h
                if(min<10) min = '0'+min
                if(s<10) s = '0'+s

                const orderNum = String(y)+String(mon)+String(d)+String(h)+String(min)+String(s)+that.randomNum(4)
                return orderNum;
            },
            randomNum(n) {
                var randomNum = ''
                for(var i=0;i<n;i++){
                    randomNum += Math.floor(Math.random()*10)
                }
                return randomNum
            }
        }
    });





</script>
{/block}